<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 商品管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.search" placeholder="商品名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="primary"  @click="handleAdd">添加新商品</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="imgsrc" label="商品封面图">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.imgsrc"
                            :preview-src-list="[scope.row.imgsrc]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="goodName" label="商品"></el-table-column>
                <el-table-column prop="oldPrice" label="价格">
                     <template slot-scope="scope">{{scope.row.model[0].oldPrice}}￥</template>
                </el-table-column>
                <el-table-column prop="nowPrice" label="优惠价">
                    <template slot-scope="scope" >{{scope.row.model[0]. nowPrice}}￥</template>
                </el-table-column>
                <el-table-column prop="soldNumber" label="销量"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleModel(scope.$index, scope.row)"
                        >编辑型号</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="商品名">
                    <el-input v-model="form.goodName"></el-input>
                </el-form-item>
                <!-- <el-form-item label="价格">
                    <el-input v-model="form.oldPrice"></el-input>
                </el-form-item>
                <el-form-item label="优惠价">
                    <el-input v-model="form.nowPrice"></el-input>
                </el-form-item> -->
                <el-form-item label="封面图">
                    <el-upload
                        class="upload-demo"
                        action="http://funvalue.top:23323/goodsmanage/upload"
                        :file-list="editImgList"
                        :limit="1"
                        :on-success="handleUploadEditImg"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="描述图">
                    <el-upload
                        class="upload-demo"
                        action="http://funvalue.top:23323/goodsmanage/upload"
                        :file-list="editDescribeList"
                        :limit="1"
                        :on-success="handleUploadEditDescribe"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item label="库存">
                    <el-input v-model="form.inventory"></el-input>
                </el-form-item> -->
                <el-form-item label="一级分类">
                    <el-select v-model="form.typeId" placeholder="一级分类" class="handle-select mr10" @change="chooseType">
                        <el-option v-for="item in classify" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select v-model="form.goodsTypeId" placeholder="二级分类" class="handle-select mr10">
                        <el-option v-for="item in classifySecond" :key="item.id" :label="item.secondMenu" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增弹出框 -->
        <el-dialog title="添加商品" :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="addform" label-width="70px">
                <el-form-item label="商品名">
                    <el-input v-model="addform.goodName"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="addform.oldPrice"></el-input>
                </el-form-item>
                <el-form-item label="优惠价">
                    <el-input v-model="addform.nowPrice"></el-input>
                </el-form-item>
                <el-form-item label="封面图">
                    <el-upload
                        class="upload-demo"
                        action="http://funvalue.top:23323/goodsmanage/upload"
                        :limit="1"
                        :headers="token"
                        :on-success="handleUploadimgsrc"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="描述图">
                    <!-- <el-input v-model="addform.describe"></el-input> -->
                    <el-upload
                        class="upload-demo"
                        action="http://funvalue.top:23323/goodsmanage/upload"
                        :limit="1"
                        :on-success="handleUploadDescribe"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                        list-type="picture"> 
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="addform.inventory"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加型号 -->
        <el-dialog  title="添加型号" :visible.sync="modelVisible" width="60%">

            <div v-for="model in modelList" :key="model.id">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item  label="型号名">
                        <el-input v-model="model.model" placeholder="型号名" style="width:100px"></el-input>
                    </el-form-item>
                    <el-form-item label="售价">
                        <el-input v-model="model.oldPrice" placeholder="售价" style="width:100px"></el-input>
                    </el-form-item>
                    <el-form-item label="折扣价">
                        <el-input v-model="model.nowPrice" placeholder="折扣价" style="width:100px"></el-input>
                    </el-form-item> 
                    <el-form-item label="库存">
                        <el-input v-model="model.inventory" placeholder="库存" style="width:100px"></el-input>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary" @click="changeModel(model)">修改</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-form :inline="true" :model="addModelForm" class="demo-form-inline">
                    <el-form-item  label="型号名">
                        <el-input v-model="addModelForm.model" placeholder="型号名" style="width:100px"></el-input>
                    </el-form-item>
                    <el-form-item label="售价">
                        <el-input v-model="addModelForm.oldPrice" placeholder="售价" style="width:100px"></el-input>
                    </el-form-item>
                    <el-form-item label="折扣价">
                        <el-input v-model="addModelForm.nowPrice" placeholder="折扣价" style="width:100px"></el-input>
                    </el-form-item> 
                    <el-form-item label="库存">
                        <el-input v-model="addModelForm.inventory" placeholder="库存" style="width:100px"></el-input>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary" @click="addModel(addModelForm)">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getAllGoods } from '../../api/gmanage';
import { editGoods } from '../../api/gmanage';
import { addGoods } from '../../api/gmanage';
import { delGoods } from '../../api/gmanage';
import { getClassify } from '../../api/gmanage';
import {addModelData} from '../../api/gmanage';
import {changeModelData} from '../../api/gmanage';

export default {
    name: 'basetable',
    data() {
        return {
            query: {
                search: '',
                page: 1,
            },
            tableData: [],
            delList: [],
            editVisible: false,
            addVisible: false,
            modelVisible: false,
            pageTotal: 0,
            form: {},
            addform: {},
            idx: -1,
            id: {},
            classify: [],
            classifySecond: [],
            classifyData: [],
            editImgList: [],
            modelForm:{},
            modelList:[],
            addModelForm:{},
            token : {token:localStorage.getItem('token')} 
        };
    },
    created() {
        this.getData();
    },
    methods: {
        
        //获取页面数据
        getData() {
            getAllGoods(this.query).then(res => {
                console.log(res);
                this.tableData = res.data.list;
                this.pageTotal = res.data.total ;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'page', 1);
            this.getData();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.id.id=row.id
                    delGoods(this.id).then(res=>{
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    })
                })
                .catch(() => {});
        },

        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = JSON.parse(JSON.stringify(row)) ;
            this.form.goodsTypeId="";
            this.editVisible = true;
            this.editImgList=[{url:row.imgsrc}]
            this.editDescribeList=[{url:row.describe}]
            getClassify().then(res=>{
                this.classifyData=res.data;
                res.data.forEach(el=>{
                    el.goodsTypeSecendList.forEach(da=>{
                        //通过商品分类id 初始化分类选中状态
                        if(da.id==row.goodsTypeId){
                            this.classify=res.data
                            this.classifySecond=el.goodsTypeSecendList
                            this.form.goodsTypeId=da.id
                            this.form.typeId=el.id
                        }
                    })
                })
            })
        },
        //编辑上传图片后
        handleUploadEditImg(response, file, fileList){
            this.form.imgsrc=response.data
        },
        handleUploadEditDescribe(response, file, fileList){
            this.form.describe=response.data
        },
        // 保存编辑
        saveEdit() {
            this.form.model=null
            editGoods(this.form).then(res => {
                this.editVisible = false;
                this.$message.success(`修改成功`);
                this.getData();
            }).catch(e=>{
                this.$message.error();(`修改失败`);
            });
            
        },
        // 添加操作
        handleAdd() {
            this.addVisible = true
        },
        //添加图片 上传后执行
        handleUploadimgsrc(response, file, fileList){
            this.addform.imgsrc=response.data
        },
         handleUploadDescribe(response, file, fileList){
            this.addform.describe=response.data
        },
        // 保存添加
        saveAdd() {
            addGoods(this.addform).then(res => {
                this.addVisible = false;
                this.$message.success(`添加成功`);
                this.getData();
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        //更改一级分类
        chooseType(id){
            this.form.goodsTypeId="";
            this.classifyData.forEach(el=>{
                if(el.id==id){
                    this.classifySecond=el.goodsTypeSecendList
                }
            })
           
        },
        //编辑型号
        handleModel(index, row){
            this.modelList = JSON.parse(JSON.stringify(row.model)) ;
            this.addModelForm={}
            this.addModelForm.goodsId=row.id
            this.modelVisible = true;
        },
        //确认编辑型号
        changeModel(model){
            this.modelForm=model
            changeModelData(this.modelForm).then(res=>{
                this.modelVisible = false;
                this.$message.success(`修改成功`);
                this.getData();
            })
        },
        //添加型号
        addModel(model){
            this.modelForm=model
            console.log(this.modelForm)
            addModelData(this.modelForm).then(res=>{
                this.modelVisible = false;
                this.$message.success(`添加成功`);
                this.getData();
            })
        }
    }
};
</script>

<style scoped>

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
